<nav-bar-panel></nav-bar-panel>
<div class="content container">
    <form class="form-inline" style="height: 50px;">
        <div class="form-group home-search-nav">
            <!--<select class="form-control" style="width: 6em; display: inline;background-position: right center" ng-model="toSearchType">-->
            <!--<option value="shop">商家</option>-->
            <!--<option value="product">商品</option>-->
            <!--</select>-->
            <div class="home-search-nav-select-group-btn input-group-btn" style="width: 6em; display: inline;">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">{{toSearchType==='shop'?'商家':'商品'}}<span
                        class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a ng-click="toSearchType=shop">商家</a></li>
                    <!--<li><a ng-click="toSearchType=product">商品</a></li>-->
                </ul>
            </div>
            <span class="glyphicon glyphicon-search" style="position: relative;
    top: 3px;
    font-size: 17px;
    color: gainsboro;
    left: 0.9em;"></span>
            <input type="search" class="inline-form-control input-sm home-search-input"
                   style="display: inline; width: calc(100% - 8em); width: -webkit-calc(100% - 8em); width: -moz-calc(100% - 7.5em);  margin-left: -1.1em; background: #E64512; border-radius: 25px; margin-top: 5px; margin-bottom: 5px;"
                   ng-model="searchKeyword"
                   placeholder="搜索">
            <span class="glyphicon glyphicon-search" ng-click="searchCommon(searchKeyword);searchKeyword='';" style="font-size: 20px;
    padding-left: 0.2em;
    color: white; top: 3px;"></span>
        </div>
    </form>
    <div class="panel panel-default">
        <!--<div class="panel-heading">-->
        <!--<h3 class="panel-title">商户分类</h3>-->
        <!--</div>-->
        <div class="panel-body">
            <div class="row category-slides-panel" style="height: 150px">
                <carousel interval="5000">
                    <slide ng-repeat="slide in shopCategoryGroups track by $index" active="slide.active">
                        <div>
                            <a ng-repeat="category in slide" href="#/category/{{category.id}}"
                               class="category-logo-panel"
                               style="padding-top: 5px; padding-bottom: 5px;">
                                <img src="{{category.logoUrl}}" class="img-circle category-logo"
                                     ng-if="category.logoUrl"/>
                                <br/>
                                <span>{{category.name}}</span>
                            </a>
                        </div>
                    </slide>
                </carousel>
                <!--<a class="label label-danger" style="float: left;font-size: 1em;padding: 3px 1.5em;margin: 0 10px;"-->
                   <!--ng-repeat="category in shopCategories"-->
                   <!--href="#/category/{{category.id}}">{{category.name}}</a>-->

                <!--<div class="clearfix"></div>-->
            </div>
        </div>
    </div>
    <div class="home-banner">
        <!--<img src="{{index_background_image}}" style="width: 100%; height: 180px;" alt=""/>-->
        <div style="height: 190px">
            <carousel interval="5000">
                <slide ng-repeat="slide in index_background_images track by $index" active="slide.active">
                    <img ng-src="{{slide.url}}" style="margin:auto; height: 180px; width: 100%;">
                </slide>
            </carousel>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">热门商店</h3>
        </div>
        <div class="panel-body">
            <div class="row hotests-shops-preview-panel">
                <div ng-repeat="shop in hotestShops" class="m3-item-panel"
                     ng-include="'/wechatshop/static/views/shop-list-item-tmpl.html'">
                    <!--<a href="#/shop/{{shop.id}}">-->
                    <!--<img ng-src="{{shop.logoUrl}}" alt="" style="width: 80px; height: 80px" class="img-thumbnail"/>-->
                    <!--<h4 class="limit-line inline-name" style="position: absolute;-->
                    <!--left: 85px;-->
                    <!--top: 10px;">{{shop.name}}</h4>-->
                    <!--&lt;!&ndash;<rating ng-model="shop.rating" max="5" readonly="true" class="inline-rating"></rating>&ndash;&gt;-->
                    <!--<span class="inline-rating m-star"></span>-->
                    <!--<span class="limit-line inline-description"-->
                    <!--ng-bind="shop.description | plain | to_trusted"></span>-->
                    <!--<span class="limit-line inline-address" ng-bind="shop.address"></span>-->
                    <!--</a>-->
                </div>
                <div class="clearfix"></div>
            </div>
            <div style="text-align: center;">
                <a href="#/hotest_shops/hotest" class="readmore-link">查看更多</a>
            </div>
        </div>
    </div>
    <div class="top-bottom-ctrl-panel">
        <span class="ctrl-up" ng-click="goToTop()"></span>
        <!--<span class="glyphicon glyphicon-menu-down ctrl-down" ng-click="goToBottom()"></span>-->
    </div>
    <div class="panel panel-default" style="display: none">
        <div class="panel-heading">
            <h3 class="panel-title">热门商品</h3>
        </div>
        <div class="panel-body">
            <div class="row hotests-products-preview-panel">
                <ul class="list-group" style="  margin-left: -20px; margin-right: -20px">
                    <li class="list-group-item" ng-repeat="product in hotestProducts"
                        ng-click="showProductPage(product)">
                        <div style="margin-bottom: -24px;">
                            <img ng-src="{{product.logoUrl}}" alt=""
                                 style="width: 80px; height: 80px; position: relative; margin: 5px; margin-top: -3px; margin-left: 0"
                                 class="thumbnail"/>
                                <span class="limit-line"
                                      style="font-size: 1.5em; position: absolute; left: 110px; top: 12px">{{product.name}}</span>
                            <rating ng-model="product.rating" max="5" readonly="true" class="inline-rating"
                                    style="display: inline-block; position: absolute; left: 110px; top: 35px; color: #ff2a2a;"></rating>
                                <span class="limit-line"
                                      style="position: absolute; top: 68px; right: 30px; max-width: 250px;"
                                      ng-bind-html="product.description | plain | to_trusted"></span>
                            <br/>
                            <span class="product-price" style="position: absolute; left: 110px; top: 59px;"
                                  ng-class="{'disabled': product.discount>0}">{{product.price}}元</span>
                            <span class="product-price" style="position: absolute; left: 166px; top: 59px;"
                                  ng-if="product.discount>0">{{product.promotionPrice}}元</span>
                        </div>
                        <!--<a href="#/product/{{product.id}}">-->
                        <!--<img ng-src="{{product.logoUrl}}" alt="" style="width: 80px; height: 80px"/>-->
                        <!--<h4 class="limit-line">{{product.name}}</h4>-->
                        <!--<span class="product-price">￥{{product.price}}元</span>-->
                        <!--</a>-->
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <!--<h1>商品分类</h1>-->
    <!--<div class="list-group">-->
    <!--<a href="#/category/{{category.id}}" class="list-group-item"-->
    <!--ng-repeat="category in shopCategories">{{category.name}}</a>-->
    <!--</div>-->
</div>
<footer-bar-panel></footer-bar-panel>